/**
 * @Description: 员工卡面组件
 * @author tao.xie
 * @date 2019-02-22
 */

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Image, ImageBackground, StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import { px2dp, showToast } from 'rn-xiaobu-utils'

export default class StaffCardFace extends Component {
  /**
   * 格式化卡号
   * @param cardno
   * @private
   */
  _formatCardNo = (cardno) => {
    if (typeof cardno !== 'string') return
    cardno = cardno.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
    return cardno
  }

  render () {
    return (
      <ImageBackground source={require('../../../assets/img/buscard/staffcard_bg.png')}
        style={{ ...this.props.style, ...styles.container }}>

        <Image source={require('../../../assets/img/buscard/staff.png')} style={styles.busicon}/>
        <View style={styles.balancewrapper}>
          <Text style={styles.balance}>员工卡余额: </Text>
          <Text style={{ ...styles.balance, ...styles.balanceno }}>{this.props.balance}元</Text>
        </View>
        <Text style={styles.name}>{this.props.name}</Text>
        <Text style={styles.cardno}>NO.{this._formatCardNo(this.props.cardno)}</Text>
        <TouchableOpacity activeOpacity={0.8} onPress={() => {
          showToast('订单操作')
        }}>
          <Text style={styles.bookmeal}>订餐 ></Text></TouchableOpacity>
      </ImageBackground>
    )
  }
}

StaffCardFace.propTypes = {
  balance: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  cardno: PropTypes.string.isRequired
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: px2dp(640),
    height: px2dp(330),
    paddingTop: px2dp(53),
    paddingLeft: px2dp(40)
  },

  busicon: {
    position: 'absolute',
    width: px2dp(88),
    height: px2dp(88),
    top: px2dp(40),
    right: px2dp(30)
  },

  balancewrapper: {
    flexDirection: 'row'
  },

  balance: {
    color: '#fff',
    fontSize: px2dp(40),
    lineHeight: px2dp(56)
  },

  balanceno: {
    fontWeight: 'bold'

  },

  name: {
    color: '#fff',
    fontSize: px2dp(24),
    lineHeight: px2dp(33),
    marginTop: px2dp(4)
  },

  cardno: {
    color: '#fff',
    fontSize: px2dp(40),
    lineHeight: px2dp(47),
    marginTop: px2dp(42),
    letterSpacing: px2dp(8)
  },
  bookmeal: {
    color: '#fff',
    textAlign: 'right',
    fontSize: px2dp(28),
    lineHeight: px2dp(40),
    marginRight: px2dp(40),
    marginTop: px2dp(35)
  }
})